<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>影厅管理</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../../css/dashboard.css" rel="stylesheet">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #ececf6;
        }
        header {
            background-color: #ffdf7e; /* 蓝色 */
            color: #171a1d;
            padding: 20px 0;
            text-align: center;
        }
        nav {
            background-color: #7abaff;
            color: #fff;
            padding: 10px;
            text-align: center;
        }
        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        nav ul li {
            display: inline;
            margin-right: 10px;
        }
        section {
            padding: 20px;
            text-align: center;
        }
        footer {
            background-color: #818182;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
        .movie-poster {
            width: 200px;
            height: auto;
            margin-bottom: 20px;
        }
        .login-button {
            position: absolute;
            top: 70px;
            right: 20px;
            background-color: #cfe2ff;
            color: #23292e;
            padding: 10px 20px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
</head>
    <style>
        /* Custom styles for this template */
        body {
            font-family: Arial, sans-serif;
        }

        .container-fluid {
            padding-top: 20px;
        }

        .table {
            width: 100%;
            margin-bottom: 1rem;
            background-color: transparent;
        }

        .table th,
        .table td {
            padding: 0.75rem;
            vertical-align: top;
            border-top: 1px solid #dee2e6;
        }

        .table thead th {
            vertical-align: bottom;
            border-bottom: 2px solid #dee2e6;
        }

        .table tbody+tbody {
            border-top: 2px solid #dee2e6;
        }

        .table-sm th,
        .table-sm td {
            padding: 0.3rem;
        }

        .btn {
            padding: 0.3rem 0.75rem;
            font-size: 0.9rem;
        }
    </style>
</head>

<body>
<header>
    <h1>Welcome to 丽江新中数影城</h1>
</header>
    <!-- Your existing HTML content -->
    <div class="container-fluid">
        <div class="row">
            <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
                <h2><a class="btn btn-success btn-sm" href="#" th:href="@{/toCinema}">添加用户</a></h2>
                <div class="table-responsive">
                    <form action="#" th:action="@{/#}" method="get">
                        <label>姓名:<input type="text" name="name" th:value="${name}"/>&nbsp;
                            性别:<input type="text" name="sex" th:value="${sex}"/>&nbsp</label>
                        <button type="submit" class="btn btn-success btn-sm" value="搜索">搜索</button>
                    </form>
                    <form>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>电影名字</th>
                                    <th>影厅容量</th>
                                    <th>影厅编号</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="cinema:${cinemas}">
                                    <td th:text="${cinema.id}"></td>
                                    <td th:text="${cinema.name}"></td>
                                    <td th:text="${cinema.capacity}"></td>
                                    <td th:text="${cinema.cinema_id}"></td>
                                    <td class="center">
<!--                                        <a class="btn btn-success btn-sm" href="#" th:href="@{/selectById/}+${user.id}">查看</a>-->
<!--                                        <a class="btn btn-info btn-sm" href="#" th:href="@{/toUpdateUser/}+${cinema.id}">修改</a>-->
                                        <a class="btn btn-danger btn-sm" href="#" th:href="@{/delCinema/}+${cinema.id}">删去</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </form>
                </div>
            </main>
        </div>
    </div>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>

</html>
